<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域解决方案</title>
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.5/theme-chalk/index.css"/>
</head>
<body>
    <h2>JSONP 跨域</h2>
    <img src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_e835568.png" alt="">
    <!--<iframe src="http://www.baidu.com" frameborder="0"></iframe>-->


    <!--<h2>Proxy代理</h2>-->

    <!--<h2>CORS(服务器端技术)</h2>-->
    <!--<h2>Ngnix反向代理</h2>-->
    <!--<h2>Websocket</h2>-->
    <!--<h2>postMessage</h2>-->
    <!--<h2>....</h2>-->
</body>
<script>
//    var hello = 100;
    function hello(a){
        console.log(a);
        console.log("这里是hello执行" + a)
    }
    function hello2(a){
        alert(a);
        alert("这里是hello执行" + a)
    }
</script>
<script src="http://127.0.0.1:3000?callback=hello"></script>
<script>
    //JSONP --> JSON PADDING
    //  JSON padding(填充
    //HTML特殊标签不会受到同源策略影响
    //link script img iframe

    //JSONP原理 通过script标签不受同源策略的影响,通过src属性向后端发送请求,后端接受到请求之后,根据前端请求地址中的callback回调函数的名字 来把JSON数据填充到回调函数内部, 进行返回. 前端在接收到返回结果之后 自动的调用本地callback中填写的方法 实现数据获取


    /*
    * //JSONP实现代码
    * 前端
    *      function hello(a){
    *          console.log(a);
    *          console.log("这里是hello执行" + a)
    *      }
    * <script src="http://127.0.0.1:3000?callback=hello">
    *
    * 后端
    * let callbackObj = urlModel.parse(request.url, true).query;
    * response.write(callbackObj.callback + "(" + JSON.stringify(a) + ")");
    * */


//    <!--<h2>Proxy代理</h2>-->
//    module.exports = {
//        devServer: {// 开发环境代理配置
//            proxy: {
//                '/': {
//                    target: "http://127.0.0.1:3000",
//                    changeOrigin: true
//                }
//            }
//        },
//    }

//    <!--<h2>CORS(服务器端技术)</h2>-->
    // response.headers("Access-Control-Allow-Origin","*");
</script>
<!--<script>
    let xhr = new XMLHttpRequest();
    xhr.open("GET","http://127.0.0.1:3000");
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            console.log("responseText===>",xhr.responseText)
        }
    };
    xhr.send();

    //正常的跨域报错
    /**
    *  Access to XMLHttpRequest at 'http://127.0.0.1:3000/' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    * */
</script>-->



<!--不是浏览器是不是就没有这个问题了?-->





</html>